<template>
    <div class="section">
        <el-card class="bbx">
            <div class="header">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="change">
                    <el-menu-item index="1">销售额</el-menu-item>
                    <el-menu-item index="2">访问量</el-menu-item>
                </el-menu>
                <section class="bodd">
                    <el-radio-group v-model="changeData" size="mini">
                        <el-radio-button label="本日"></el-radio-button>
                        <el-radio-button label="本周"></el-radio-button>
                        <el-radio-button label="本月"></el-radio-button>
                        <el-radio-button label="本年"></el-radio-button>
                    </el-radio-group>
                    <el-date-picker v-model="dateString" type="daterange" align="right" unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions2" size="mini">
                    </el-date-picker>
                </section>
            </div>
            <div class="text item">
                <v-charts :options="options" class="ech"></v-charts>
                <ul>
                    <p>排行榜</p>
                    <li v-for="(item, index) in arr" :key="index">
                        <span class="a"><span :class="index < 3 ? 'c' : 'd'">{{ item.no }}</span><span class="b">{{
                                item.name
                        }}</span></span>
                        <span>{{item.money}}</span>
                    </li>
                </ul>
            </div>
        </el-card>
    </div>
</template>

<script>
import getData from '@/mixin/mixin'
export default {
    mixins: [getData],
    computed: {
        options() {
            let obj = {
                title: {
                    text: '年度销售额',
                    textStyle: {
                        fontSize: '14px',
                        color: '#bbb'
                    }

                },
                xAxis: {
                    type: "category",
                    data: this.orderFullYearAxis
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        type: "bar",
                        data: this.orderFullYear,
                        barWidth: 10,

                    }
                ],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                            color: "rgba(0, 0, 0, 0.15)",
                        },
                    },
                },
            }
            if(this.activeIndex=='1'){
                obj.title.text = '年度销售额'
                obj.series[0].data = this.orderFullYear
                obj.xAxis.data = this.orderFullYearAxis
                this.arr = this.orderRank
            }else{
                obj.title.text = '年度访问量'
                obj.series[0].data = this.userFullYear
                obj.xAxis.data = this.userFullYearAxis
                this.arr = this.userRank
            }
            return obj
        }
    },
    data() {
        return {
            arr: [],
            activeIndex: '1',
            changeData: '本周',
            dateString: '',//日期选择器时间
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    methods: {
        change(index) {
            this.activeIndex=index
        }
    }
}
</script>

<style lang="scss" scope>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section {
    .el-card__body {
        padding: 0 !important;
    }
}

.text {
    display: flex;
    justify-content: space-between;

    .ech {
        flex: 3;
    }

    ul {
        flex: 1;
        list-style: none;

        li {
            display: flex;
            justify-content: space-between;

            .b {
                margin-left: 10px;
            }
        }
    }
}

.c {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: black;
    color: white;
    text-align: center;
}

.d {
    width: 20px;
    height: 20px;
    text-align: center;
}
</style>